$f: 19.2;


.home {
  position: relative;
  background: #F9F9F9;

  .bg1 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;

    img {
      width: 100%;
      display: block;
      object-fit: cover;
    }
  }

  .bg2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;

    img {
      width: 100%;
      display: block;
      object-fit: cover;
    }
  }

  .bg3 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    img {
      width: 100%;
      display: block;
      object-fit: cover;
      height: 100%;
    }
  }

  .dialog_success{
    position: fixed;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    padding: 15/$f+vw 18/$f+vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10/$f+vw;
    background: #0F77FF;
    flex-shrink: 0;
    z-index: 10;
    display: none;
    svg {
      width: 24/$f+vw;
      height: auto;
      display: block;
    }

    p {
      color: #fff;
      font-weight: 400;
      margin-left: 6/$f+vw;
      white-space: nowrap;
    }
  }
  .main {
    padding: 364/$f+vw 160/$f+vw 120/$f+vw 160/$f+vw ;
    position: relative;
    z-index: 10;

    .title {
      text-align: center;

      h1 {
        color: #0F77FF;
        font-weight: 500;
        line-height: 0.8;
        text-transform: capitalize;
        margin-bottom: 24/$f+vw;
      }

      .tag {
        color: #000;
        font-weight: 300;
        line-height: 1.5;
      }
    }

    .section1 {
      margin: 360/$f+vw 0 190/$f+vw 0;
      display: flex;
      justify-content: space-between;

      .l {
        h1 {
          font-weight: 400;
          line-height: 1.42;
        }

        .des {
          margin-top: 24/$f+vw;
          font-weight: 300;
          line-height: 2;
        }
      }

      .r {
        position: relative;

        .pic1 {
          filter: drop-shadow(24px 30px 50px rgba(110, 163, 242, 0.12));
          border-radius: 15/$f+vw;
          position: relative;
          z-index: 10;

          img {
            width: 541/$f+vw;
            height: 311/$f+vw;
            display: block;
            object-fit: cover;
            border-radius: 15/$f+vw;
          }
        }

        .pic2 {
          filter: drop-shadow(24px 30px 50px rgba(110, 163, 242, 0.12));
          border-radius: 15/$f+vw;
          position: absolute;
          right: 260/$f+vw;
          top: -140/$f+vw;
          width: 541/$f+vw;
          height: 312/$f+vw;

          img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            border-radius: 15/$f+vw;
          }
        }
      }
    }

    .section2 {
      h1 {
        line-height: 1.42;
        text-transform: capitalize;
        text-align: center;
        font-weight: 500;
      }

      .form {
        margin-top: 80/$f+vw;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .item {
          width: 47.5%;
          position: relative;
          margin-bottom: 60/$f+vw;

          input {
            width: 100%;
            border-radius: 20/$f+vw;
            border: 1px solid #FFF;
            background: rgba(255, 255, 255, 0.30);
            /* 投影 */
            box-shadow: 24px 30px 50px 0px rgba(110, 163, 242, 0.12);
            height: 83/$f+vw;
            outline: none;
            font-size: 24/$f+vw;
            font-weight: 300;
            color: #747070;
            padding: 24/$f+vw 35/$f+vw;

            &::placeholder {
              color: #9D9D9D;
              font-weight: 300;
            }
          }

          textarea {
            width: 100%;
            border-radius: 20/$f+vw;
            border: 1px solid #FFF;
            background: rgba(255, 255, 255, 0.30);
            /* 投影 */
            box-shadow: 24px 30px 50px 0px rgba(110, 163, 242, 0.12);
            height: 221/$f+vw;
            outline: none;
            font-size: 24/$f+vw;
            font-weight: 300;
            color: #747070;
            padding: 24/$f+vw 35/$f+vw;
            resize: none;

            &::placeholder {
              color: #9D9D9D;
              font-weight: 300;
            }
          }

          .notice {
            position: absolute;
            left: 334/$f+vw;
            top: 50%;
            transform: translateY(-50%);
            padding: 15/$f+vw 20/$f+vw 14/$f+vw 16/$f+vw;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10/$f+vw;
            background: #FFE2E2;
            flex-shrink: 0;
            display: none;

            svg {
              width: 24/$f+vw;
              height: auto;
              display: block;
            }

            p {
              color: #D74E4E;
              font-weight: 400;
              margin-left: 6/$f+vw;
            }
            &.show{
              display: flex;
            }
          }
        }

        .msg {
          width: 100%;
          margin-bottom: 100/$f+vw;
          .notice {
            top: 42/$f+vw;
            left: 334/$f+vw;
            right: auto;
            transform: translateY(0);
          }
        }

        .btn {
          width: 100%;

          .submit {
            border-radius: 20/$f+vw;
            border: 1.264px solid rgba(255, 255, 255, 0.16);
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 100%, rgba(255, 255, 255, 0.00) 100%), #0F77FF;
            box-shadow: 0px 0px 0px 1.264px #0F77FF, 0px 1.264px 2.528px 0px rgba(12, 43, 100, 0.20);
            display: flex;
            padding: 10/$f+vw 35/$f+vw 10/$f+vw 36/$f+vw;
            justify-content: center;
            align-items: center;
            width: fit-content;
            margin: 0 auto;
            color: #FFF;
            line-height: 1.35;
            cursor: pointer;
          }
        }
      }
    }
  }

  @media screen and (max-width: 1024px) {
    .dialog_success{
       padding: 7px 9px;
       border-radius: 5px;
       svg{
        width: 16px;
       }
       p{
        margin-left: 5px;
        font-size: 14px;
       }
    }
    .main{
      padding: 120px 5%;
      .title{
        h1{
          margin-bottom: 12px;
        }
      }
      .section1{
        flex-direction: column;
        margin: 60px 0 80px 0;
        .l{
          .des{
            margin-top: 12px;
          }
        }
        .r{
          margin-top: 30px;
          .pic1{
            border-radius: 15px;
             img{
              width: 100%;
              height: auto;
              border-radius: 15px;
             }
          }
          .pic2{
            position: static;
            border-radius: 15px;
            width: 100%;
            height: auto;
            margin-top: 20px;
            img{
              width: 100%;
              height: auto;
              border-radius: 15px;
             }
          }
        }
      }
      .section2{
        .form{
          margin-top: 40px;
          .item{
            width: 100%;
            margin-bottom: 20px;
            input{
              height: 55px;
              padding: 12px 17px;
              font-size: 16px;
              border-radius: 10px;
            }
            textarea{
              height: 155px;
              padding: 12px 17px;
              font-size: 16px;
              border-radius: 10px;
            }
            .notice{
              padding: 8px 10px;
              border-radius: 5px;
              left: auto;
              right:20px;
              svg{
                width: 16px;
              }
              p{
                margin-left: 3px;
                font-size: 14px;
              }
            }
          }
          .msg{
            margin-bottom: 30px;
          }
          .btn{
            .submit{
              border-radius: 15px;
              padding: 5px 17px;
            }
          }
        }
      }
    }
  }
}